<template>
	<PageLayout id='exportList'>
		<ContentLayout :titleName='"Label Name"'>
			<SearchInputLayout slot='search' >
				<template slot='searchInput'>
					
					<InputLabel name='Payment Time' >
						<div style="display: flex;align-items: center;flex-wrap: wrap;">
							<Date @change='onChangeDate1' type='date' :showPickerOptions='false' :dateValue.sync='dateValue1'></Date>
							<span style="padding: 0 2px;">-</span>
							<Date @change='onChangeDate2' type='date' :showPickerOptions='false' :dateValue.sync='dateValue2'></Date>
						</div>
					</InputLabel>
					
					<InputLabel name='Date' width='180px'>
						<Date type='date' @change='onChangeDate3' :showPickerOptions='false' :dateValue.sync='dateValue3'></Date>
					</InputLabel>
					<InputLabel name='Time' width='170px'>
						<Time :value.sync='timeValue'></Time>
					</InputLabel>
					<InputLabel  name='Name' width='200px'>
						<Select :value.sync='selectVal1'>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</Select>
					</InputLabel>
					<InputLabel name='First Name'>
						<Select :multiple='true' :value.sync='selectVal2'>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</Select>
					</InputLabel>
					<InputLabel name='First Name'>
						<Select :multiple='true' :className="'num_tags'" :collapseTags='true' :value.sync='selectVal3'>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</Select>
					</InputLabel>
					<InputLabel name='Area'>
						<Input @blur='inputBlur' :value.sync="inputValue1"></Input>
					</InputLabel>
					<InputLabel name='Your Love A' width="200px">
						<Input :value.sync="inputValue2"></Input>
					</InputLabel>
					<InputLabel name='Your Love And Me'>
						<Input :value.sync="inputValue2"></Input>
					</InputLabel>
					<!--<InputLabel name='Your Love'>
						<Input type='textarea' :value.sync="inputValue2"></Input>
					</InputLabel>--> 
					<InputLabel name='Your Love'>
						<Input :value.sync="inputValue2"></Input>
					</InputLabel>
					<InputLabel name='Your Love'>
						<Input :value.sync="inputValue2"></Input>
					</InputLabel>
					
				</template>
				
				<SearchBtn>
					<Button @click="diaModal=true" slot='btn_left'  icon="el-icon-search">OpenDia</Button>
					<Button slot='btn_left'  icon="el-icon-download">Search</Button>
					<Button @click="refresh" type='info' slot='btn_left'  icon="el-icon-refresh">Refresh</Button>
					<Button @click="selectDelete" type='danger' slot='btn_left'  icon="el-icon-delete">Delete</Button>
					
					<Button type=''  slot='btn_left'  icon="el-icon-close">Cancle</Button>
					<Button type='info'  slot='btn_left'  >Cancle</Button>
					<Button   slot='btn_left'  @click="Submit">Submit</Button>
					
					<!--这里还没封装组件-->
					<el-button-group  slot='btn_left'>
						<IconBtn content="Edit" iconClass="el-icon-edit"></IconBtn>
						<IconBtn iconClass="el-icon-search" content="Search"  ></IconBtn>
						<IconBtn iconClass="el-icon-share" content="Share"  ></IconBtn>
						<IconBtn iconClass="el-icon-delete" content="Delete"  ></IconBtn>
						
					</el-button-group>
					
					<Button   @click="searchBtn" icon="el-icon-search">Search</Button>
					<Button  type="green" icon="el-icon-download">Export</Button>
				</SearchBtn>
				
			</SearchInputLayout>
			
			<Table :selectableFun='selectableFun' @selectionChange='selectionChange' :selectionRadio='true' ref='tableRef'  v-if="true" :tableData='tableData'> 
			    
				<el-table-column
				      prop="date"
				      label="Date"
				      align='center'
				      header-align='left'
				      width="80">
				</el-table-column>
				<el-table-column
				      prop="money1"
				      label="Money1"
				      align='right'
				      >
				</el-table-column>
				<el-table-column
				      prop="money2"
				      label="Money2"
				      align='right'
				      :width="moneyWith()">
				      
				    <template  slot-scope="scope">
				    	{{scope.row.money2}}
				    </template>
				    
				</el-table-column>
				<el-table-column
					
				      prop="name"
				      label="Name"
				      resizable
				      align='center'
				      :show-overflow-tooltip='true'
				      >
				</el-table-column>
				<el-table-column
				      prop="retailer"
				      label="Retailer"
				      resizable
				      align='center'
				      min-width='100' 
				      :show-overflow-tooltip='true'
				      >
				</el-table-column>
				<el-table-column
			      label="姓名"
			      align='center'
			      >
			      <template slot-scope="scope">
			        <el-popover trigger="hover" placement="top">
			          <p>姓名: {{ scope.row.name }}</p>
			          <p>住址: {{ scope.row.address }}</p>
			          <div slot="reference" class="name-wrapper">
			            <el-tag size="medium">{{ scope.row.name }}</el-tag>
			          </div>
			        </el-popover>
			      </template>
			    </el-table-column>
				<el-table-column
				      prop="remark"
				      label="Remark"
				      resizable
				      align='center'
				      :show-overflow-tooltip='true'
				      >
				</el-table-column>
				<el-table-column
				      prop="address"
				      :show-overflow-tooltip='true'
				      align='center'
				      label="Address">
				</el-table-column>
				
			    <el-table-column
			      prop="tag"
			      label="Tag"
			      align='center'
			      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
			      :filter-method="filterTag"
			      filter-placement="bottom-end">
			      <template slot-scope="scope">
			        <el-tag
			          :type="scope.row.tag === '家' ? 'primary' : 'success'"
			          disable-transitions>{{scope.row.tag}}</el-tag>
			      </template>
			    </el-table-column>
			    
			    <el-table-column
			      label="单独的链接Button"
			      align='center'
			      width="100">	
			      <template slot-scope="scope">
			      	<Button type="text" size="small" @click="handleClick(scope.row)" >查看</Button>
			      </template>
			    </el-table-column>
			    
			    <el-table-column
			      label="图标按钮组"
			      align='center'
			      	>	
			      <template slot-scope="scope">
			      	<el-button-group  slot='btn_left'>
						<IconBtn content="Edit" iconClass="el-icon-edit"></IconBtn>
						<IconBtn iconClass="el-icon-share" content="Share"  ></IconBtn>
						<IconBtn iconClass="el-icon-delete" content="Delete"  ></IconBtn>
					</el-button-group>
			      </template>
			    </el-table-column>
			    
				<el-table-column
			      align="center">
			      <template slot="header" slot-scope="scope">
			        <el-input
			          v-model="search"
			          size="mini"
			          placeholder="输入关键字搜索"/>
			      </template>
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click.native.prevent="handleDelete(scope.$index, tableData)">Delete</el-button>
			      </template>
			    </el-table-column>
			</Table>
		</ContentLayout>
		<Dialog :diaModal.sync='diaModal'> 
			
			<div class="dia_input">
				<el-row  :gutter='10'>
				  <el-col :xs="24" :sm="12" :md="8" >
				  	<InputLabel name='Area' width='100%' right=''>
						<Input @blur='inputBlur' :value.sync="inputValue1"></Input>
					</InputLabel>
				  </el-col>
				  <el-col :xs="24" :sm="12" :md="8" >
				  	<InputLabel name='Area' width='100%' right=''>
						<Input @blur='inputBlur' :value.sync="inputValue1"></Input>
					</InputLabel>
				  </el-col>
				  <el-col :xs="24" :sm="12" :md="8" >
				  	<InputLabel name='Area' width='100%' right=''>
						<Input @blur='inputBlur' :value.sync="inputValue1"></Input>
					</InputLabel>
				  </el-col>
				  <el-col :xs="24" :sm="12" :md="8" >
				  	<InputLabel name='Your Love A' width='100%' right=''>
						<Input :value.sync="inputValue2"></Input>
					</InputLabel>
				  </el-col>
				  <el-col :xs="24" :sm="12" :md="8" >
				  	<InputLabel name='Your Love And Me' width='100%' right=''>
						<Input :value.sync="inputValue2"></Input>
					</InputLabel>
				  </el-col>
				</el-row>
			</div>
			<div class="dia_table">
				<Table  ref='tableRef'  v-if="true" :tableData='tableData'> 
			    
					<el-table-column
					      prop="date"
					      label="Date"
					      align='center'
					      header-align='left'
					      >
					</el-table-column>
					<el-table-column
					      prop="money1"
					      label="Money1"
					      align='right'
					      >
					</el-table-column>
					<el-table-column
					      prop="money2"
					      label="Money2"
					      align='right'
					      :width="moneyWith()">
					      
					    <template  slot-scope="scope">
					    	{{scope.row.money2}}
					    </template>
					    
					</el-table-column>
				</Table>
			</div>
			
			<template v-if="false">
				<span>需要注意的是内容是默认不居中的这里写内容</span>
				<div style="width: 1400px;background: red;">内容很多的时候</div>
				<div>内容很多的时候</div>
				<div>内容很多的时候</div>
				<div>内容很多的时候</div>
				<div>内容很多的时候</div>
				<div>内容很多的时候</div><div>内容很多的时候</div>
				<div>内容很多的时候</div>
				<div v-for="item in 70">{{item}}内容很多的时候</div>
			</template>
				
			
		</Dialog>
		<Pagination @handleSizeChange='handleSizeChange' @handleCurrentChange='handleCurrentChange' :pageTotal='401' :currentPage.sync='currentPage' @pageSelectChange='handleSizeChange'></Pagination>
		<!--:pageSelectVal.sync='pageSelectVal'-->
		
	</PageLayout>
		
		
</template>

<script>
	
	export default {
		components: {
			
		},
		data() {
			return {
				timeValue:'',
				search: '',
				diaModal:true, 
				input: '',
				options: [{
					value: '选项1',
					label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				selectVal2: '',
				selectVal1: '',
				selectVal3: '',
				currentPage: 1,
				pageSelectVal: 20,
				inputValue1: '',
				inputValue2: '',

				labelWith: '300px',

				tableData: [],
		        dateValue1:'',
		        dateValue2:'',
		        dateValue3:'',
		        daterangeValue:[],
		        
		        selectTableList:[],
		        

			}
		},
		created() {},
		watch: {
			
		},
		computed: {

		},
		mounted() {
			this.refresh()
		},
		methods: {
			Submit(){
				this.$message({
		          showClose: true,	
		          message: '恭喜你，这是一条成功消息',
		          type: 'success'
		        });
			},
			selectDelete(){
				if(this.selectTableList.length>0){
					this.$message({
			          message: '删除成功',
			          type: 'success'
			        });
				}else{
					this.$message('请选择行');
				}
			},
			//该方法写得有点死，目前只对金钱有效果
			moneyWith(){
				let num = 200 ;
				let length = 0
				if(this.tableData[0]){
					for(let a = 0 ;a<this.tableData.length;a++){
						if(length<this.tableData[a].money2.length){
							length = this.tableData[a].money2.length
						}
					}
					num = length * 7.05 + 6
					console.log('说：'+length * 12 + 5)	
				}
				//中文大小为字体大小,英文12px为7.05,.为2.98
				return num
			},
			handleClick(){
				this.$message('这里是一个单独的操作按钮');
			},
			refresh(){
				this.tableData = []
				for(let a = 0 ;a<20;a++){
					var o ={}
					o={
					  tag:'家',
					  retailer:'API66029992(API66029992)',
					  selectFlg:'1',
			          date: '2020-02-25 14:35:23',
			          name: 'Joker Jon',
			          money1:'45.00',
			          money2: '221321313.0000',
			          remark:'这里是很多备注这里是很多备注这里是很多备注这里是很多备注',
			          address: "内容过长，加上:show-overflow-tooltip='true'上海市普陀区金沙江路 1518号。电话1738055",
			        };
			        if( a % 2 == 0  ){
			        	o.money2 = a + '221321313.0000'+  ''
			        	o.tag = '公司'
			        }
			        if(a==0){
			        	o.money2 = '1234567899123465.0000'
			        }
					this.tableData.push(o)
				}
			},
			filterTag(value, row) {
		        return row.tag === value;
		    },
			selectableFun(row,index){
				if(index==0){
					return false
				}else{
					return true
				}
			},
			//table的select
			selectionChange(val){
				console.log(val)
				this.selectTableList = val
			},
			
			inputBlur() {
				console.log(this.inputValue1)
			},
			handleCurrentChange(val) {
				console.log(`第${val}页`)
			},
			handleSizeChange(val) {
				console.log(`每页显示${val}`)
			},
			onChangeDate1(val){
				this.dateValue1 = val;
				console.log(val)
				this.$set(this.daterangeValue,0,val)
			},
			onChangeDate2(val){
				this.dateValue2 = val;
				this.$set(this.daterangeValue,1,val)
			},
			onChangeDate3(val){
				this.dateValue3 = val;
			},
			searchBtn(){
				console.log(this.dateValue1)
				console.log(this.dateValue2)
				console.log(this.dateValue3)
				console.log(this.daterangeValue)
			},
			handleEdit(index, row) {
		        console.log(index, row);
		        this.diaModal = true
		    },
		    
		    
		    diaSubmit(){
		    	this.$message({
			          message: '删除成功',
			          type: 'success'
			    });
		    },
		    handleDelete(index, rows) {
		    	//静态删除
		    	this.$msgbox({
		    		title:'提示',
		    		message:'这里是提示内容',
		    		type:'info',
		    		customClass:'csssssssssss',
		    		showClose:true,
		    		confirmButtonText:'确定',
		    		cancelButtonText:'cancel',
		    		showCancelButton: true,
		    		
		    	}).then(()=>{
		    		console.log(index, rows);
		        
		       	 	rows.splice(index, 1);
		    	}).catch(() => {
		          	this.$message({
		            	type: 'info',
		            	message: '已取消删除'
		          	});
		        });
		    },
		    handleClose(done) {
		        this.$confirm('确认关闭？')
		          .then(_ => {
		            done();
		          })
		          .catch(_ => {});
		      }
		}
	}
</script>
<!--用了scoped修改组建里面的样式会失败-->
<!--scoped="scoped"-->
<style lang="scss">
	@import './exportList.scss';
</style>